<template>
  <view class="container">
    <!-- Header with add button -->
    <view class="header">
      <uni-button type="primary" size="mini" @click="openAddPopup">新增供应商</uni-button>
    </view>

    <!-- Supplier list table -->
    <uni-table :border="true">
      <uni-tr>
        <uni-th align="center">供应商</uni-th>
        <uni-th align="center">联系电话</uni-th>
        <uni-th align="center">地址</uni-th>
        <uni-th align="center">联系人</uni-th>
        <uni-th align="center">备注</uni-th>
        <uni-th align="center">操作</uni-th>
      </uni-tr>
      <uni-tr v-for="supplier in suppliers" :key="supplier.id">
        <uni-td align="center">{{ supplier.name }}</uni-td>
        <uni-td align="center">{{ supplier.phone }}</uni-td>
        <uni-td align="center">{{ supplier.address }}</uni-td>
        <uni-td align="center">{{ supplier.contact }}</uni-td>
        <uni-td align="center">{{ supplier.note }}</uni-td>
        <uni-td align="center">
          <uni-button type="default" size="mini" @click="openEditPopup(supplier)">编辑</uni-button>
          <uni-button type="error" size="mini" @click="openDeletePopup(supplier)">删除</uni-button>
        </uni-td>
      </uni-tr>
    </uni-table>

    <!-- Popup for Adding/Editing a supplier -->
    <uni-popup ref="editPopup" type="center">
      <view class="popup-container">
        <h3>{{ currentSupplier.id ? '编辑供应商' : '新增供应商' }}</h3>
        <view class="form-row">
          <label>供应商：</label>
          <input v-model="currentSupplier.name" class="input-field" />
        </view>
        <view class="form-row">
          <label>联系电话：</label>
          <input v-model="currentSupplier.phone" class="input-field" />
        </view>
        <view class="form-row">
          <label>地址：</label>
          <input v-model="currentSupplier.address" class="input-field" />
        </view>
        <view class="form-row">
          <label>联系人：</label>
          <input v-model="currentSupplier.contact" class="input-field" />
        </view>
        <view class="form-row">
          <label>备注：</label>
          <input v-model="currentSupplier.note" class="input-field" />
        </view>
        <view class="button-group">
          <uni-button type="primary" size="small" @click="saveSupplier">保存</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>

    <!-- Popup for confirming deletion -->
    <uni-popup ref="deletePopup" type="center">
      <view class="popup-container">
        <h3>确认删除</h3>
        <text>确定要删除 "{{ currentSupplier.name }}" 吗？</text>
        <view class="button-group">
          <uni-button type="error" size="small" @click="confirmDelete">删除</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      suppliers: [],
      currentSupplier: {},
      userInfo: {},
    };
  },
  methods: {
    async fetchSuppliers() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/getSuppliers',
        method: 'GET',
        data: {
          main_account_id: this.userInfo.user_id,
        }
      });
      if (res.data.code === 200) {
        this.suppliers = res.data.data;
      } else {
        uni.showToast({
          title: res.data.message,
          duration: 2000,
          icon: 'none'
        });
      }
    },
    openAddPopup() {
      this.currentSupplier = { id: null, name: '', phone: '', address: '', contact: '', note: '' };
      this.$refs.editPopup.open();
    },
    openEditPopup(supplier) {
      this.currentSupplier = Object.assign({}, supplier);
      this.$refs.editPopup.open();
    },
    closePopup() {
      this.$refs.editPopup.close();
      this.$refs.deletePopup.close();
    },
    async saveSupplier() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/saveSupplier',
        method: 'POST',
        data: { ...this.currentSupplier, main_account_id: this.userInfo.user_id }
      });
      if (res.data.code === 200) {
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        });
        this.fetchSuppliers();
        this.closePopup();
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    openDeletePopup(supplier) {
      this.currentSupplier = Object.assign({}, supplier);
      this.$refs.deletePopup.open();
    },
    async confirmDelete() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/deleteSupplier',
        method: 'POST',
        data: { id: this.currentSupplier.id, main_account_id: this.userInfo.user_id }
      });
      if (res.data.code === 200) {
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        });
        this.fetchSuppliers();
        this.closePopup();
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      if (token) {
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
      } else {
        this.userInfo = {};
        this.$router.push('/pages/login/login');
      }
    }
  },
  mounted() {
    this.checkLoginStatus();
    this.fetchSuppliers();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #ecf0f1;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.uni-table {
  width: 100%;
  border-collapse: collapse;
}
.uni-th,
.uni-td {
  padding: 10px;
  border: 1px solid #ddd;
}
.uni-th {
  background-color: #f9f9f9;
}
.popup-container {
  width: 80%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
label {
  width: 80px;
  color: #666;
  margin-right: 10px;
}
.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}
.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.uni-button {
  margin-left: 10px;
}
</style>
